<template>
  <div>
    <h1>风险因素</h1>
    <el-button type="text" @click="factorIns()">新增/修改</el-button>
    <el-card>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="factorId"
          label="风险id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="factorName"
          label="风险名称"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="factorDeleted(scope.row.factorId)">删除</el-button>
            <el-button @click="factorIm(scope.row.factorId)">管理相关疾病表</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form :model="tbFactor" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="请输入风险id">
            <el-input v-model="tbFactor.factorId"></el-input>
          </el-form-item>
          <el-form-item label="请输入风险名字">
            <el-input v-model="tbFactor.factorName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="factorUpdate()">修改</el-button>
            <el-button type="primary" @click="factorInsert()">新增</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible1"
        width="30%"
        :before-close="handleClose">
        <el-table
          :data="tableData1"
          border
          style="width: 100%">
          <el-table-column
            prop="riskId"
            label="风险id"
            width="180">
          </el-table-column>
          <el-table-column
            prop="ailmentId"
            label="疾病id"
            width="180">
          </el-table-column>
          <el-table-column
            prop="ailmentName"
            label="疾病名称"
            width="180">
          </el-table-column>
          <el-table-column
            label="操作"
            width="180">
            <template slot-scope="scope">
              <el-button @click="ailmentFactorDeleted(scope.row.riskId)">删除</el-button>
              <el-button @click="ailmentFactor(scope.row.riskId)">新增/修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible2"
        width="30%"
        :before-close="handleClose">
        <el-form :model="tbAilmentFator" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form>
            <el-select v-model="tbAilmentFator.ailmentId" placeholder="请选择">
              <el-option v-for="item in options"
              :label="item.ailmentName"
              :key="item.ailmentId"
              :value="item.ailmentId"></el-option>
            </el-select>
          </el-form>
          <el-form-item>
            <el-button type="primary" @click="ailmentFactorUpdate()">修改</el-button>
            <el-button type="primary" @click="ailmentFactorInsert()">新增</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import { ailmentSelect,factorSelect,factorInsert,factorUpdate,factorDeleted,ailmentFactorSelect,ailmentFactorInsert,ailmentFactorUpdate,ailmentFactorDeleted } from '@/api/evaluating'
  export default {
    name: 'index',
    data() {
      return {
        options:[],
        dialogVisible: false,
        dialogVisible1: false,
        dialogVisible2: false,
        tbFactor:{
            factorId:'',
            factorName:''
        },
        tableData: [],
        tableData1: [],
        tbAilmentFator:{
          riskId:'',
          factorId:'',
          ailmentId:''
        },
        tbAilment:{
          ailmentName:'',
        },
      }
    },
    mounted(){
      this.factorSelect()
      this.ailmentSelect()
    },
    methods:{
      ailmentFactorInsert(){
        this.tbAilmentFator.riskId=null
        console.log(this.tbAilmentFator)
        ailmentFactorInsert(this.tbAilmentFator).then((res)=>{
          this.dialogVisible2=false
        })
      },
      ailmentFactorUpdate(){
        console.log(this.tbAilmentFator)
        ailmentFactorUpdate(this.tbAilmentFator).then((res)=>{
          this.dialogVisible2=false
        })
      },
      ailmentFactorDeleted(row){
        console.log(row)
        ailmentFactorDeleted(row).then((res)=>{
          console.log(res.data)
        })
      },
      ailmentSelect(){
        ailmentSelect(this.tbAilment).then((res)=>{
          this.options=res.data
          console.log(this.options)
        })
      },
      ailmentFactor(row){
        this.dialogVisible2=true
        this.tbAilmentFator.riskId=row
      },
      factorIns(){
        this.dialogVisible=true
      },
      factorIm(row){
        this.dialogVisible1=true
        this.tbAilmentFator.factorId=row
        ailmentFactorSelect(this.tbAilmentFator).then((res)=>{
          this.tableData1=res.data
          console.log(this.tableData1)
        })
      },
      factorSelect(){
        factorSelect(this.tbFactor).then((res)=>{
          console.log(res.data)
          this.tableData=res.data
        })
      },
      factorDeleted(row){
        factorDeleted(row).then((res)=>{
          console.log(res.data)
          this.factorSelect()
        })
      },
      factorUpdate(){
        factorUpdata(this.tbFactor).then((res)=>{
          this.tbFactor=[]
          this.dialogVisible=false
        })
      },
      factorInsert(){
        factorInsert(this.tbFactor).then((res)=>{
          this.tbFactor=[]
          this.dialogVisible=false
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }
</script>

<style scoped></style>

